<template>
  <div class="order-dialog">
    <div class="tabs">
      <div class="tab1">
        <span><span style="opacity: 0">占位</span>状态：</span>
        <el-select v-model="radio1" @change="selectRadio" clearable>
          <el-option
            v-for="item in statusArr"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="tab2">
        <span>医嘱时间：</span>
        <el-date-picker
          v-model="enterStartTime"
          align="right"
          :clearable="false"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        />
      </div>
      <div class="tab1">
        <span>同步状态:</span>
        <el-radio-group
          v-model="radio2"
          style="margin-left: 10px"
          @change="selectRadio"
        >
          <el-radio-button label="5">全部</el-radio-button>
          <el-radio-button label="1">已同步</el-radio-button>
          <el-radio-button label="0">未同步</el-radio-button>
        </el-radio-group>
      </div>
      <div class="tab2">
        <span>药嘱类型:</span>
        <el-radio-group
          v-model="radio3"
          style="margin-left: 10px"
          @change="selectRadio"
        >
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button label="1">长嘱</el-radio-button>
          <el-radio-button label="0">临嘱</el-radio-button>
        </el-radio-group>
      </div>
      <div class="tab1" style="line-height: 30px">
        <span>药嘱类型：</span>
        <el-checkbox-group v-model="drugCheckList" @change="selectRadio" style="display: inline-block;margin-left: 20px">
          <el-checkbox :label="0">药品</el-checkbox>
          <el-checkbox :label="8">输液</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="tab2">
        <el-button
          class="btn"
          size="medium"
          @click="syncTable"
        >同步</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          class="btn"
          style="margin-right: 10px"
          size="medium"
          @click="queryData"
        >检索</el-button>
      </div>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%;overflow-x: auto"
      height="400"
      stripe
      :header-cell-style="{ background: '#d2e0f9', color: '#606266' }"
      ref="multipleTable"
      :row-key="(row)=>{ return row.id}"
      :cell-style="cellStyle"
      @selection-change="select"
      @select-all="selectAll"
    >
      <el-table-column type="selection" disabled='true' :reserve-selection="true"></el-table-column>
      <el-table-column type="index" label="序号"  />
      <el-table-column label="id" align="center" prop="id" v-if="false" />
      <el-table-column label="计划执行时间" align="center" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.orderNo == scope.row.orderSubNo">{{ scope.row.startTimePoint }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderName"
        label="医嘱内容"
        align="center"
      />
      <el-table-column
        label="剂量"
        align="center"
      >
      <template slot-scope="scope">
          {{scope.row.dosage}}  {{scope.row.dosageUnits}}
        </template>

      </el-table-column>
      <el-table-column
        prop="frequency"
        label="频次"
        align="center"
      />
      <el-table-column
        prop="useMode"
        label="给药途径"
        align="center"
      />
      <el-table-column
        prop="repeatIndicator"
        label="医嘱类型"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.repeatIndicator === 0 ? "临时医嘱" : "长期医嘱" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="drugType"
        label="是否药嘱"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.drugType === 0 ? "否" : "是" }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" align="center" />

      <el-table-column
        prop="defaultTimePoint"
        label="医嘱时间"
        align="center"
      />
      <el-table-column
        prop="orderStatus"
        label="状态"
        align="center"
      >
        <template slot-scope="scope">
          {{
            scope.row.orderStatus == "0"
              ? "待审"
              : scope.row.orderStatus == "1"
              ? "审核"
              : scope.row.orderStatus == "2"
                ? "执行"
                : scope.row.orderStatus == "3"
                  ? "取消"
                  : "停止"
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="isSync"
        label="同步状态"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.isSync === 0 ? "未同步" : "已同步" }}
        </template>
      </el-table-column>
    </el-table>
    <!--  -->
    <el-pagination
      style="text-align: right;margin-top: 10px"
      :current-page="start"
      :page-size="PageSize"
      :pager-count="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import {dateUtils} from "@/utils/dateUtils";
import {
  medOrderExecQueryListgetDrugList,
  medOrderExecSynchronousInPutS,
} from "@/api/table";

export default {
  props: {
    rowIndex: Number,//护理单的行号
  },
  data() {
    return {
      selectAllOrder:[],//跨页都选的医嘱
      selectOrder: [],//勾选的医嘱id数组
      statusArr: [//医嘱状态
        {
          id: "0",
          name: "待审",
        },
        {
          id: "1",
          name: "审核",
        },
        {
          id: "2",
          name: "执行",
        },
        {
          id: "3",
          name: "取消",
        },
        {
          id: "4",
          name: "停止",
        },
      ],
      tableData: [],//医嘱列表
      data: {},//vue中患者信息
      start: 1, // 默认显示第几页
      totalCount: 0, // 总条数，根据接口获取数据长度(注意：这里不能为空)
      pgeSizes: [10, 20, 30, 40], // 个数选择器（可修改）
      PageSize: 10, // 默认每页显示的条数（可修改）
      radio1: "", //状态
      radio2: 5, //同步状态
      radio3: '', //医嘱类型
      drugCheckList: [0,8], //药嘱多选列表
      patientId: "",//患者id
      enterStartTime: "",//检索时间

    };
  },
  computed: {
    getData() {
      return this.$store.state.user.severFall;
    },
  },
  watch: {
    getData() {
      this.initData();
    },
  },
  created() {},
  mounted() {
     this.initData();
  },
  methods: {
    //初始化查询
    initData() {
      this.enterStartTime=dateUtils(1,null);
      this.data = this.$store.state.user.severFall;
      if (
        typeof this.data.patient_id == "string" &&
        this.data.patient_id.length > 0
      ) {
        this.patientId = this.data.patient_id;
        this.medOrderExecQueryListgetDrugList(this.PageSize, this.start);
      } else {
        this.$message({
          message: "请先选择病人",
          type: "warning",
        });
      }
    },
    //选择后实时查询
    selectRadio(val) {
      this.medOrderExecQueryListgetDrugList(this.PageSize, 1);
    },

    //判断是否可以勾选，子医嘱不可以勾选
    checkboxT(row,index){
      if(row.orderNo == row.orderSubNo){
        return 1
      }else {
        return 0
      }
    },
    //单选
    select(selection) {
       console.log(selection);
       this.selectAllOrder=selection;
    },
    //全选按钮隐藏不处理逻辑
    selectAll(selection) {
    },
    //查询初始化
    medOrderExecQueryListgetDrugList(pageSize, start) {
      if (
        typeof this.data.patient_id == "string" &&
        this.data.patient_id.length > 0
      ) {
        if(this.drugCheckList.length == 0){
          this.$message({message: "药嘱选项不能为空", type: "warning"});
          return;
        }
        medOrderExecQueryListgetDrugList({
          drugType: '1', //医嘱属性
          repeatIndicator: this.radio3, //医嘱类型
          classType: this.drugCheckList.toString(), //药嘱类别
          orderStatus: this.radio1, //状态
          isSync: this.radio2, //同步状态
          size: pageSize,
          start: start,
          orderTime: this.enterStartTime,
          patientId: this.patientId,
        }).then((res) => {
          this.tableData = res.data;
          for (let gou = 0; gou < this.tableData.length; gou++) {
            this.tableData[gou].hasChildren = [];
          }
          this.totalCount = res.totalCount;
        });
      } else {
        this.$message({
          message: "请先选择病人",
          type: "warning",
        });
      }
    },
    //同步医嘱到护理单
    syncTable() {
      this.selectOrder = [];
      if(this.$refs.multipleTable.selection.length>0){
        //同步限制暂时移除
        // let dragFlag = true;
        // if(this.$refs.multipleTable.selection.length>1){
        //   for (var i = 0; i < this.$refs.multipleTable.selection.length; i++) {
        //     if (this.$refs.multipleTable.selection[i].useMode != "口服") {
        //       dragFlag = false;
        //       break;
        //     }
        //   }
        //   if(!dragFlag){
        //     alert("多选只能选择口服药类型，请重新选择");
        //     return;
        //   }
        // }
        for (var f = 0; f < this.$refs.multipleTable.selection.length; f++) {
          this.selectOrder.push(
            this.$refs.multipleTable.selection[f].id
          );
        }
        medOrderExecSynchronousInPutS(this.selectOrder).then((res) => {
          var item = new Object();
          item.rowIndex = this.rowIndex;
          item.val = res.data.orderName;
          item.allowanceDosage = res.data.allowanceDosage;
          item.id = res.data.id;
          item.useMode=res.data.useMode;
          item.orderTime=this.enterStartTime;
          eventBus.$emit("selectOrName", item, this.selectOrder);
          if (res.code === 200) {
            this.medOrderExecQueryListgetDrugList(this.PageSize, 1);
            this.$message({
              message: "入量同步成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "入量同步失败",
              type: "warning",
            });
          }
        });
      }else{
        this.$message({
          message: "请选择医嘱内容",
          type: "warning",
        });
      }
    },
    //颜色显示
    cellStyle(row, column, rowIndex, columnIndex) {
      //根据报警级别显示颜色
      //每天执行总次数
      //医嘱同步次数
      if (row.row.syncCount == "" && row.row.orderExecNum == "") {
        return "background:white;color: white";
      } else if (parseInt(row.row.syncCount) < parseInt(row.row.orderExecNum)) {
        return "background:yellow;color: black";
      } else if (
        parseInt(row.row.syncCount) >= parseInt(row.row.orderExecNum)
      ) {
        return "background:red;color: white";
      }
    },
    //医嘱查询
    queryData() {
      this.medOrderExecQueryListgetDrugList(this.PageSize, 1);
    },
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      // 点击每页显示的条数时，显示第一页
      this.medOrderExecQueryListgetDrugList(val, 1);
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.start = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.start = val;
      // 切换页码时，要获取每页显示的条数
      this.medOrderExecQueryListgetDrugList(this.PageSize, (this.start = val));
    },
  },
};
</script>
<style lang="scss" scoped>

.order-dialog{
  margin-top: -20px;
  .tabs{
    display: flex;
    flex-wrap: wrap;
    margin-bottom:10px;
    .tab1{
      width: 40%;
      margin:5px 0;
    }
    .tab2{
      width: 60%;
      margin:5px 0;
    }
    .btn{
      float: right;
    }
  ;
  }
  ::v-deep .el-input--suffix .el-input__inner {
    padding: 0 5px;
  }
}
/*禁用全选按钮*/
::v-deep .el-table__header-wrapper th .el-checkbox {
  display:none;
}
</style>
